<template>
  <div>
    <div v-resize="handleResize" class="box"></div>
  </div>
</template>

<script setup lang="ts">
interface IResize {
  bottom: number;
  height: number;
  left: number;
  right: number;
  top: number;
  width: number;
  x: number;
  y: number;
}

// 【hooks形式】
// import useResize from "v-resize--wyn";

// onMounted(() => {
//   useResize(document.querySelector(".box") as HTMLElement, (e: IResize) => {
//     console.log(e);
//   });
// });

// 【自定义指令形式】
const handleResize = (e: IResize) => {
  console.log(e);
};
</script>

<style scoped>
.box {
  width: 200px;
  height: 200px;
  border: 1px solid red;
  resize: both;
  margin: 200px auto;
  overflow: hidden;
}
</style>
